<template>
    <div>
        <!-- 轮播图开始 -->
        <div class="banner">
            <!-- 返回按钮 -->
            <div class="back-icon" @click="backHandle">
                <van-icon name="arrow-left" />
            </div>
            <!-- 购物车按钮 -->
            <div @click="toCart" class="cart-icon" v-if="!isSpecial">
                <van-icon name="shopping-cart" />
            </div>
            <!-- :autoplay="3000" -->
            <van-swipe class="my-swipe" :autoplay="autoplay" indicator-color="white" @change="swipeChange">
                <template v-if="videos.length != 0">
                    <van-swipe-item v-for="(item, index) in videos" :key='index'>
                        <div class="video-item">
                            <img :src="alPath + 'video/' + item.hvCover" alt="">
                            <video width="100%" height="100%" id="stop" controls
                                poster="../../assets/product/video-none.png">
                                <source :src="alPath + 'video/' + item.hvVideo" type="video/mp4">
                                <source :src="alPath + 'video/' + item.hvVideo" type="video/ogg">
                            </video>
                        </div>
                    </van-swipe-item>
                </template>

                <van-swipe-item v-for="(item, index) in loops" :key="index">
                    <img :src="alPath + 'zhonghui/bannerPic/' + item.picName" class="banner-image">
                </van-swipe-item>




                <template #indicator>
                    <div class="custom-indicator">
                        {{ current + 1 }}/{{ loops.length + videos.length }}
                    </div>
                </template>
            </van-swipe>
        </div>
        <!-- 轮播图结束 -->

        <div class="content">
            <div class="padding-box">
                <!-- 产品信息 -->
                <div class="box information">

                    <!-- 价格 -->
                    <div class="space-between infor-price">
                        <!-- 普通商品价格展示 开始 -->
                        <div class="price-box">
                            <div class="priceYuan">
                                <div class="price-num">
                                    <div>
                                        <span class="huiyuanPrice huiyuanPrice1">原价</span>
                                        <span>￥</span>{{ product_price }}
                                    </div>
                                </div>
                                <template v-if="!isSpecial">
                                    <div class="share-box" @click="toShare">
                                        <img src="../../assets/product/detail-share-icon.png">
                                        <div class="share-text">分享</div>
                                    </div>
                                </template>
                            </div>


                            <template v-if="!isSpecial">
                                <div class="jinka-box">
                                    <div class="jinka-left">
                                        <img src="../../assets/product/vipGold.png" class="vipGlod">
                                        <span class="jinkTip">{{ myGrade == 4 ? '股东' : '会员' }}价</span>
                                    </div>
                                    <div><span class="jinka-12">￥</span><span class="jinka-121">
                                            {{ myGrade == 4 ? product_gPrice : (product_price / 2).toFixed(2) }}</span>
                                    </div>
                                </div>
                                <div class="vipBuyTip">
                                    会员购买可享受5折优惠
                                </div>
                            </template>

                        </div>
                        <!-- 普通商品价格展示 结束 -->

                    </div>
                    <!-- 产品名称 -->
                    <div class="product-name">{{ product.productName }}</div>
                    <!-- 产品标题 -->
                    <div class="product-title">{{ product.productTitle }}</div>
                    <!-- 产品销量 -->
                    <div class="space-between sale">
                        <div>总销量：{{ (product.productSales == null ? 0 : product.productSales) + month_sales }}件</div>
                        <div>月销量：{{ parseInt(product.productSales / 12) + month_sales }}件</div>
                    </div>
                </div>

                <!-- 选择、优惠、参数 -->
                <div class="box">
                    <div class="spec-item" @click="openProductAlert(0)">
                        <div class="spec-item-name">选择</div>
                        <div class="spec-item-text">{{ formart.formatName }}</div>
                        <div class="spec-item-icon">
                            <img src="../../assets/product/product-spec-icon.png">
                        </div>
                    </div>

                    <div class="spec-item margin-bottom-0" @click="openparameterAlert">
                        <div class="spec-item-name">参数</div>
                        <div class="spec-item-text">产品类型、产品参数</div>
                        <div class="spec-item-icon">
                            <img src="../../assets/product/product-spec-icon.png">
                        </div>
                    </div>
                </div>
                <!-- 评价 -->
                <div class="box" ref="comment">
                    <div class="comment">
                        <div class="comment-title">商品评价（{{ commentNum }}）</div>
                        <div class="comment-more" @click="getMoreComment">查看更多评价
                            <van-icon name="arrow" />
                        </div>
                    </div>
                    <div class="comment-item" v-for="(item, index) in comments" :key="index">
                        <div class="comment-user">
                            <img class="comment-user-head" @error="loadimg"
                                :src="item.userImg ? alPath + 'zhonghui/user/' + item.userImg : '../../assets/geren/timg.png'"
                                alt="">
                            <div class="comment-user-name">{{ item.userName }}</div>
                            <div class="comment-icon">
                                <img src="../../assets/product/comment-icon1.png"
                                    v-for="(star, sIndex) in (item.commentStar * 1)" :key="sIndex">
                            </div>
                        </div>
                        <div class="comment-text">{{ item.commentContent || "系统默认好评" }}</div>
                    </div>
                </div>
                <!-- 问答 -->
                <div class="box">
                    <div class="comment">
                        <div class="comment-title">商品问答（{{ answer_num }}）</div>
                        <div class="comment-more" @click="getMoreAnswer">查看更多问答
                            <van-icon name="arrow" />
                        </div>
                    </div>
                    <div class="question-item" v-for="(item, index) in answers" :key="index">
                        <div class="question-item-icon">问
                        </div>
                        <div class="question-item-text">{{ item.answerContent }}</div>
                    </div>
                </div>
            </div>
            <!-- 商品详情图 -->
            <div class="detail-box" ref="detail">
                <img :src="alPath + 'zhonghui/detailPic/' + item.picName" v-for="(item, index) in proPics" :key="index">
            </div>
        </div>
        <!-- 底部fixed -->

        <div v-if="product.productStatus == 1 && (!noKucun) && (product.shopId == 0 || product.newnewWord == 1)"
            class="bottom-fixed">
            <div class="bottom-icon-box">
                <!-- <div class="fixed-icon-box" @click="toCustomer">
                    <img src="../../assets/product/product-service.png">
                    <div class="fixed-icon-text">客服</div>
                </div> -->
                <div v-show="!collect" class="fixed-icon-box" @click="toCollect(1)">
                    <img src="../../assets/product/product-collect.png">
                    <div class="fixed-icon-text">收藏</div>
                </div>
                <div v-show="collect" class="fixed-icon-box" @click="toCollect(0)">
                    <img src="../../assets/product/product-collected.png">
                    <div class="fixed-icon-text">已收藏</div>
                </div>
            </div>
            <div class="bottom-btn-box">
                <div class="btn-add-cart" @click="openProductAlert(1)" v-if="!isSpecial">加入购物车</div>
                <div class="btn-now-buy" @click="openProductAlert(2)">立即购买</div>
            </div>
        </div>
        <div v-if="product.productStatus == 0" class="default-btn-box">
            <div>此商品仅供展示</div>
        </div>
        <div v-if="noKucun && product.productStatus == 1" class="default-btn-box">
            <div>此商品暂无库存</div>
        </div>




        <!-- 参数弹窗 -->
        <van-action-sheet v-model="parameterAlertShow" title="参数">
            <div class="product-outter-content">
                <div class="product-alert-content">
                    <div class="para-item" v-for="(item, index) in paras" :key="index">
                        <div class="para-name">{{ item.parameterName }}</div>
                        <div class="para-text">{{ item.parameterContent }}</div>
                    </div>
                </div>
                <div class="true-btn-box" @click="closeparameterAlert">
                    <button type="button" class="true-btn">关闭</button>
                </div>
            </div>
        </van-action-sheet>

        <!-- 商品选择弹窗 -->
        <van-action-sheet v-model="productAlertShow" title="规格">
            <div class="product-outter-content">
                <div class="product-alert-content">
                    <div class="product-image-box">
                        <img :src="alPath + 'zhenghui/format/' + formart.formatImg">
                        <div>
                            <div class="goods-price">
                                <div v-if="isGuDong" class="cart-money">
                                    <div class="cart-jinka">股东价</div>
                                    <div class="jinka-price">￥{{ formart.formatSpecial }}</div>
                                </div>
                                <div v-else>
                                    ￥<span>{{ formart.formatPrice }}</span>
                                </div>
                            </div>
                            <div class="goods-num">库存{{ formart.formatInventory }}</div>
                        </div>
                    </div>
                    <div class="product-alert-title">规格</div>
                    <div class="prodcut-spec-box">
                        <div v-for="(item, index) in formarts" :key="index"
                            :class="item.formatId == formart.formatId ? 'product-spec-item active' : 'product-spec-item'"
                            @click="changeFormart(item)">{{ item.formatName }}</div>
                    </div>
                    <div class="product-alert-title space-between padding-top-4">
                        <div>数量</div>
                        <div class="num-box">
                            <button class="num-box-sub" @click="subProductNum" :disabled="chooseNum == 1">-</button>
                            <div class="num-box-num">{{ chooseNum }}</div>
                            <button class="num-box-add" @click="addProductNum">+</button>
                        </div>
                    </div>
                    <div class="true-btn-box">
                        <button @click="closeProductAlert" type="button" class="true-btn">确定</button>
                    </div>
                </div>
            </div>
        </van-action-sheet>






        <!-- 返回顶部 -->
        <div class="set-top" v-show="btnFlag" @click="backTop">
            <img src="../../assets/index/top.png">
        </div>
        <!-- 滚动 - 导航栏 -->
        <div class="nav" v-show="navFlag">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <div :class="navActive == 0 ? 'nav-item active' : 'nav-item'">商品</div>
            <div :class="navActive == 1 ? 'nav-item active' : 'nav-item'">评价</div>
            <div :class="navActive == 2 ? 'nav-item active' : 'nav-item'">详情</div>
            <div class="new-cart" @click="toCart" v-if="!isSpecial">
                <van-icon name="shopping-cart" />
            </div>
        </div>
    </div>
</template>

<script>
var share_img;
import { listProDetail, getProductPageMain, getProductMoreInfo, addCollectProduct, addCart } from "../../network/product";
import { alPath } from "../../network/request";
import { listMain } from "../../network/recharge";
export default {
    name: 'HomeR',
    data() {
        return {
            alPath,
            videos: [],
            current: 0,
            shop_id: localStorage.shopId == undefined ? 1 : localStorage.shopId,
            user_id: localStorage.userId == undefined ? 0 : localStorage.userId,
            product_id: localStorage.product_id,
            distributionInfo: '',
            goodsInfo: '',
            product: '',
            month_sales: 0,
            autoplay: 3000,
            loops: [],
            product_price: 0,
            product_gPrice: 0,
            paras: [],
            distribution: '',
            formarts: [],
            comments: [],
            answers: [],
            proPics: [],
            sends: [],
            answer_num: 0,
            commentNum: 0,
            collect: false,
            coupon: [],
            ifMusk: true,
            formart: '', //当前选择规格
            chooseNum: 1, //商品数量
            productAlertShow: false, //商品选择弹窗
            couponAlertShow: false, //优惠弹窗
            parameterAlertShow: false, //参数弹窗
            couponFlag: [],
            productAlertType: 0,
            scrollTop: 0, //距离顶部距离
            btnFlag: false, //返回顶部按钮显示
            navFlag: false, //滚动导航栏显示
            navActive: 0, //nav高亮
            commentHeight: 0,
            detailHeight: 0,
            noKucun: false,

            // orderRules: [],
            is_on: -1,
            vipFlag: '',
            sPrice: 0, //可省
            fkFlag: 0,
            isGetSuccess: false,
            fkNum: 0,


            myGrade: 0,//我的当前等级

            isMember: false, //是否为付费会员

            isGuDong: false,// 是否为股东

            isSpecial: false


        }
    },
    mounted() {

    },
    methods: {
        loadimg(e) {
            var img = e.srcElement;
            img.src = require('../../assets/geren/timg.png')
        },

        swipeChange: function (index) { //轮播图change
            this.current = index;
            if (this.videos.length > 0) {
                document.getElementById('stop').pause();
            }
            if (this.videos.length > 0 && index == 0) {
                this.autoplay = 0
            } else if (this.videos.length > 0 && index == 1) {
                this.autoplay = 3000
            }
        },
        getList: function () {
            this.product_id = localStorage.product_id;


            console.log(this.product_id);


            listProDetail({
                productId: this.product_id,
                userId: localStorage.userId
            }).then(res => {
                if (res.flag) {
                    console.log(res);

                    res.data.bannerList.forEach(item => {
                        if (item.picFlag == 0) {
                            this.loops.push(item)
                        } else {
                            this.proPics.push(item)
                        }
                    })

                    share_img = alPath + 'zhonghui/product/' + res.data.product.productPic
                    sharehrefTitle = res.data.product.productName

                    console.log(sharehrefTitle);

                    this.isSpecial = res.data.product.productFlag == 1
                    this.addToHistory();

                    this.answers = res.data.answerList
                    this.answer_num = this.answers.length
                    this.comments = res.data.comments
                    this.commentNum = this.comments.length

                    this.formarts = res.data.formatList
                    this.formart = this.formarts[0];

                    this.product = res.data.product

                    this.collect = this.product.collectFlag == 1

                    this.month_sales = this.product.productSales


                    if (this.formarts.length != 0) {
                        var forBig = this.formarts[0].formatPrice;
                        var forsmall = this.formarts[0].formatPrice;
                        var forGBig = this.formarts[0].formatSpecial;
                        var forGsmall = this.formarts[0].formatSpecial;
                        console.log(this.formarts)
                        var stockNum = 0;
                        for (var i = 0; i < this.formarts.length; i++) {
                            if (this.formarts[i].formatPrice > forBig) {
                                forBig = this.formarts[i].formatPrice;
                            } else if (this.formarts[i].formatPrice < forBig) {
                                forsmall = this.formarts[i].formatPrice;
                            }
                            if (this.formarts[i].formatSpecial > forGBig) {
                                forGBig = this.formarts[i].formatSpecial;
                            } else if (this.formarts[i].formatSpecial < forGBig) {
                                forGsmall = this.formarts[i].formatSpecial;
                            }
                            if (this.formarts[i].formatInventory >= 1) {
                                stockNum++;
                            }
                            if (stockNum == 0) {
                                this.noKucun = true;
                            }
                        }
                        this.product_price = (forBig * 1).toFixed(2);
                        this.product_gPrice = (forGBig * 1).toFixed(2);
                    }
                }
            })

        },
        toAD: function (href_url, product_id) {
            if (this.ifUserLogin()) {
                switch (href_url) {
                    case "javascript:void(0)":
                        break;
                    case "detail.html":
                        localStorage.product_id = product_id;
                        this.getList();
                        break;
                    case "forum_knowledge.html":
                        localStorage.topic = product_id;
                        mui.openWindow({
                            url: href_url,
                            id: href_url
                        })
                        break;
                    case "groupBuy.html":
                        localStorage.group_id = product_id;
                        mui.openWindow({
                            url: "groupBuy.html",
                            id: "groupBuy.html"
                        })
                        break;
                    case "secondKill.html":
                        localStorage.group_id = product_id;
                        mui.openWindow({
                            url: "secondKill.html",
                            id: "secondKill.html"
                        })
                        break;
                    case "forum_detail.html":
                        localStorage.forum_id = product_id;
                        mui.openWindow({
                            url: href_url,
                            id: href_url
                        })
                        break;
                    default:
                        mui.openWindow({
                            url: href_url,
                            id: href_url
                        })
                }
            }
        },

        getMoreAnswer: function () {
            if (this.ifUserLogin()) {
                localStorage.product = JSON.stringify(this.product);
                this.$router.push('/answerList')
            }
        },
        getMoreComment: function () {
            if (this.ifUserLogin()) {
                this.$router.push('/productComment')
            }
        },
        toCart: function () {
            if (this.ifUserLogin()) {
                this.$router.push('/shopCar')
            }
        },
        ifUserLogin: function () {
            this.user_id = localStorage.userId == undefined ? 0 : localStorage.userId;
            if (this.user_id == 0) {
                this.$router.replace('wxLogin')
                return false;
            } else {
                return true;
            }
        },
        toCollect: function (flag) {
            if (this.ifUserLogin()) {
                addCollectProduct({
                    userId: this.user_id,
                    productId: localStorage.product_id,
                    flag
                }).then(res => {
                    if (res.flag) {
                        this.collect = !(this.collect);
                        if (this.collect) {
                            this.$toast('收藏成功')
                        } else {
                            this.$toast('已取消收藏')
                        }
                    }
                })
            }
        },
        toCustomer: function () {
            if (this.ifUserLogin()) {
                // 客服

            }


        },
        openProductAlert: function (type) { //打开商品选择弹窗
            this.productAlertType = type;
            this.productAlertShow = true;
            this.parameterAlertShow = false;
            console.log(this.productAlertShow)
        },
        closeProductAlert: function () {
            if (this.productAlertType == 0) {
                this.productAlertShow = false;
            } else if (this.productAlertType == 1) {
                this.cart();
            } else {
                this.buyNow();
            }
        },
        buyNow: function () {
            if (this.ifUserLogin()) {
                var num = this.chooseNum;

                this.formart.newPrice = this.myGrade == 4 ? this.formart.formatSpecial : this.formart.formatPrice
                this.formart.productName = this.product.productName
                this.formart.productNum = num

                console.log(this.product);
                console.log(this.formart);

                // return

                var pro = [];
                pro.push(this.formart);
                localStorage.product = JSON.stringify(pro);
                if (this.product.productFlag == 1 && this.myGrade != 0) {
                    this.$toast('只有升级为会员才可购买哦')
                    return
                }

                this.$router.push('/submitOrder')

            }
        },
        cart: function () {
            if (this.ifUserLogin()) {
                var num = this.chooseNum;
                var formart_id = this.formart.formart_id;
                var price = this.formart.formart_price;
                var sum = (num * price).toFixed(2);


                console.log(this.formart);
                // return

                addCart({
                    userId: this.user_id,
                    productId: this.product_id,
                    productNum: num,
                    shopId: this.shop_id,
                    formatId: this.formart.formatId,
                    productName: this.product.productName,
                    formatImg: this.formart.formatImg,
                    formatPrice: this.formart.formatPrice,
                    formatSpecial: this.formart.formatSpecial,
                    formatName: this.formart.formatName

                }).then(res => {
                    if (res.flag) {
                        this.productAlertShow = false;
                        this.$toast('加入购物车成功')

                    } else {
                        this.$toast('加入购物车失败')

                    }
                })

            }
        },
        openCoupontAlert: function () { //打开优惠弹窗
            this.couponAlertShow = true;
        },
        closeCoupontAlert: function () {
            this.couponAlertShow = false;
        },
        openparameterAlert: function () { //打开参数弹窗
            this.parameterAlertShow = true;
            this.productAlertShow = false;
            console.log(this.parameterAlertShow)
        },
        closeparameterAlert: function () { //关闭参数弹窗
            this.parameterAlertShow = false;
        },
        subProductNum: function () { //商品数量减
            this.chooseNum--;
        },
        addProductNum: function () { //商品数量加
            this.chooseNum++;
        },
        toCoupon: function (couponSend) {
            couponSend.couponMinus = couponSend.coupon_minus
            couponSend.couponSum = couponSend.coupon_sum
            couponSend.couponStrating = couponSend.coupon_strating
            couponSend.couponExpiration = couponSend.coupon_expiration
            couponSend.couponMoney = couponSend.coupon_money
            couponSend.couponDetail = couponSend.coupon_detail
            localStorage.couponCard = JSON.stringify(couponSend);
            localStorage.coupon_id = couponSend.coupon_id;
            this.couponAlertShow = false;
            mui.openWindow({
                url: 'coupon_product.html',
                id: 'coupon_product.html'
            });
        },

        changeFormart: function (formart) {
            // this.product_price = formart.formart_price;
            this.formart = formart;
        },
        backTop: function () { //返回顶部
            var that = this
            var timer = setInterval(function () {
                var ispeed = Math.floor(-that.scrollTop / 5)
                document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop +
                    ispeed
                if (that.scrollTop === 0) {
                    clearInterval(timer)
                }
            }, 16)
        },
        scrollToTop: function () { //滚动监听
            var that = this;
            var clientHeigth = document.documentElement.clientHeight || 200;
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body
                .scrollTop;
            that.scrollTop = scrollTop
            //返回顶部按钮  超出一屏会出现
            if (that.scrollTop > clientHeigth) {
                that.btnFlag = true
            } else {
                that.btnFlag = false
            }
            //滚动导航栏
            if (that.scrollTop > 200) {
                that.navFlag = true
            } else {
                that.navFlag = false
            }
            if (that.scrollTop < this.commentHeight) {
                this.navActive = 0;
            } else if (that.scrollTop > this.commentHeight && that.scrollTop < this.detailHeight) {
                this.navActive = 1;
            } else if (that.scrollTop > this.detailHeight) {
                this.navActive = 2;
            }
        },
        toShare: function () {
            if (this.ifUserLogin()) {
                shareHref();
            }
        },
        addToHistory: function () {
            if (this.user_id == 0) {
                return false;
            }
            var historys = localStorage.historys;
            if (historys != undefined) {
                historys = JSON.parse(historys);
            } else {
                historys = {};
            }
            var that = this;
            if (!(historys.hasOwnProperty(that.user_id))) {
                historys[that.user_id] = [];
            }
            var now_date = this.getTime();
            var ffflag = true;
            for (var i = 0; i < historys[that.user_id].length; i++) {
                if (historys[that.user_id][i].date == now_date) {
                    ffflag = false;
                }
            }
            if (ffflag) {
                var a = {};
                a.date = now_date;
                a.pro_ids = [];
                historys[that.user_id].unshift(a);
            }
            for (var i = 0; i < historys[that.user_id][0].pro_ids.length; i++) {
                if (historys[that.user_id][0].pro_ids[i].productId == that.product.productId) {
                    historys[that.user_id][0].pro_ids.splice(i, 1);
                }
            }
            historys[that.user_id][0].pro_ids.unshift(that.product);
            localStorage.historys = JSON.stringify(historys);
        },

        getMyTypeData() {
            listMain({
                userId: localStorage.userId,
                shopId: localStorage.shopId
            }).then(res => {

                if (res.flag) {
                    if (res.data != null) {
                        this.myGrade = res.data.userStored.vipGrade
                        // this.myGrade = 4

                        this.isMember = this.myGrade != 0 && this.myGrade != 4
                        this.isGuDong = this.myGrade == 4
                        console.log(this.myGrade);
                        console.log(this.isGuDong);
                    }
                }

            })

        },
        getTime() {
            let today = new Date();
            let month =
                (today.getMonth() + 1 + "").length == 2 ?
                    today.getMonth() + 1 :
                    "0" + (today.getMonth() + 1);
            let date =
                (today.getDate() + "").length == 2 ?
                    today.getDate() :
                    "0" + today.getDate();
            return today.getFullYear() + "-" + month + "-" + date;
        },

        backHandle() {
            this.$router.go(-1)
        },


    },
    created() {
        this.getList();
        this.getMyTypeData()





    },
    //计算属性
    computed: {

    },
    filters: {
        deadline: function (coupon_expiration, coupon_type) {
            if (coupon_type != 0) {
                coupon_expiration = new Date(new Date().setTime(new Date() * 1 + (3600 * 1000 * 24 *
                    coupon_expiration) * 1));
                var vYear = coupon_expiration.getFullYear();
                var vMon = coupon_expiration.getMonth() + 1;
                var vDay = coupon_expiration.getDate();
                var hours = coupon_expiration.getHours();
                var minutes = coupon_expiration.getMinutes();
                var s = coupon_expiration.getSeconds();
                coupon_expiration = vYear + "-" + (vMon < 10 ? "0" + vMon : vMon) + "-" + (vDay < 10 ? "0" +
                    vDay : vDay);
            }
            return coupon_expiration;
        },
        nameControl: function (value) {
            var chart = value.toString().split("");
            var text = chart[0] + "**" + chart[chart.length - 1];
            return text;
        },

    },
    mounted: function () {
        window.addEventListener('scroll', this.scrollToTop);
        this.commentHeight = this.$refs.comment.getBoundingClientRect().top - 64;
        this.detailHeight = this.$refs.detail.getBoundingClientRect().top - 64;
    },
    destroyed: function () {
        window.removeEventListener('scroll', this.scrollToTop);
    }
}

var shares = null,
    product_id = localStorage.product_id,
    shop_id = localStorage.shopId,
    user_id = localStorage.userId,
    content = null,
    sharehrefTitle = '精选好物，快来围观吧~',
    sharehref = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9cf9f21ba0cbf62b&redirect_uri=https://www.ccclkj.cn/sharePage/ZTYXApp/appInto.html'
    ;
var Intent = null,
    File = null,
    Uri = null,
    main = null;
// H5 plus事件处理
function plusReady() {
    updateSerivces();
    if (plus.os.name == "Android") {
        main = plus.android.runtimeMainActivity();
        Intent = plus.android.importClass("android.content.Intent");
        File = plus.android.importClass("java.io.File");
        Uri = plus.android.importClass("android.net.Uri");
    }
}
if (window.plus) {
    plusReady();
} else {
    document.addEventListener("plusready", plusReady, false);
}
/**
 * 
 * 更新分享服务
 */
function updateSerivces() {
    plus.share.getServices(function (s) {
        shares = {};
        for (var i in s) {
            var t = s[i];
            shares[t.id] = t;
        }
    }, function (e) {
        mui.toast("获取分享服务列表失败：" + e.message);
    });
}
/**
 * 分享操作
 * @param {JSON} sb 分享操作对象s.s为分享通道对象(plus.share.ShareService)
 * @param {Boolean} bh 是否分享链接
 */
function shareAction(sb, bh) {
    if (!sb || !sb.s) {
        mui.toast("无效的分享服务！");
        return;
    }
    var msg = {
        content: content,
        extra: {
            scene: sb.x,
            current_id: localStorage.userId,
        }
    };
    if (bh) {
        var state = product_id + "@" + shop_id + "@" + user_id + "@" + 0;

        // alert(state)

        msg.href = sharehref + "&response_type=code&scope=snsapi_userinfo&state=" + state + "#wechat_redirect";

        msg.title = sharehrefTitle;

        msg.content = content;
        msg.thumbs = [share_img];
        msg.pictures = ["_www/logo.png"];
    } else {
        mui.toast("取消分享");
        if (pic && pic.realUrl) {
            msg.pictures = [pic.realUrl];
        }
    }
    // 发送分享
    if (sb.s.authenticated) {
        shareMessage(msg, sb.s);
    } else {
        mui.toast("未授权");
        sb.s.authorize(function () {
            shareMessage(msg, sb.s);
        }, function (e) {
            mui.toast("认证授权失败");
            //alert("认证授权失败："+e.code+" - "+e.message );

        });
    }
}
/**
 * 发送分享消息
 * @param {JSON} msg
 * @param {plus.share.ShareService} s
 */
function shareMessage(msg, s) {
    s.send(msg, function () {
        mui.toast("分享到\"" + s.description + "\"成功！ ");
    }, function (e) {
        mui.toast("分享到\"" + s.description + "\"失败: ");
    });
}


// 分析链接
function shareHref() {
    console.log(share_img);
    var shareBts = [];
    // 更新分享列表
    var ss = shares['weixin'];
    ss && ss.nativeClient && (shareBts.push({
        title: '微信朋友圈',
        s: ss,
        x: 'WXSceneTimeline'
    }),
        shareBts.push({
            title: '微信好友',
            s: ss,
            x: 'WXSceneSession'
        }));
    // 弹出分享列表
    shareBts.length > 0 ? plus.nativeUI.actionSheet({
        title: '分享',
        cancel: '取消',
        buttons: shareBts
    }, function (e) {
        if (e.index == 0) {
            mui.toast("您已取消了分享哟~");
        }
        (e.index > 0) && shareAction(shareBts[e.index - 1], true);
    }) : plus.nativeUI.alert('当前环境无法支持分享链接操作!');
}




</script>


<style lang='less' scoped>
body,
html {
    background: #f2f2f2 !important;
}

.share {
    position: absolute;
    width: 160px;
    height: 52px;
    display: block;
    right: 0px;
    top: -10px;
}

.banner-image {
    display: block;
    width: 100%;
    height: 100vw;
}

.banner {
    position: relative;
    width: 100%;
    height: 100vw;
}

.back-icon,
.cart-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 40px;
    z-index: 2;
    width: 72px;
    height: 72px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
}

.back-icon {
    left: 24px;
    color: #fff;
}

.cart-icon {
    right: 24px;
    color: #FFF;
    font-size: 40px;
}

.back-icon .mui-icon {
    color: #FFF;
}

.custom-indicator {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 82px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 28px;
    color: #FFF;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 16px 16px 0 16px;
}

.content {
    position: relative;
    z-index: 2;
    padding-top: 16px;
    background: #f2f2f2;
}

.padding-box {
    padding: 0 24px;
}

.box {
    position: relative;
    width: 100%;
    background: #FFF;
    padding: 32px 24px;
    border-radius: 16px;
    margin-bottom: 16px;
}

.space-between {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.infor-price {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.price-box {
    /* display: flex; */
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
}

.vipTip {
    color: #fd2d39;
    font-size: 24px;
}

.price-boxCheck {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
}

.price-num {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: 400;
    color: #333;
    line-height: 1;
}

.price-del {
    display: block;
    width: 200px;
    font-size: 24px;
    color: #999;
    margin-left: 30px;
    line-height: 1;
}

.share-box {
    position: absolute;
    top: -14px;
    right: 4px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 116px;
    height: 48px;
}

.share-box img {
    display: block;
    width: 24px;
    height: 24px;
}



.share-text {
    font-size: 24px;
    color: #999;
    margin-left: 16px;
    line-height: 1;
}

.product-name {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.product-title {
    width: 80%;
    font-size: 24px;
    color: #999;
    line-height: 1.25;
    margin-bottom: 32px;
}

.sale {
    font-size: 24px;
    color: #999;
    line-height: 1;
}

.tag {
    float: left;
    display: block;
    width: 72px;
    height: 32px;
    background: -webkit-linear-gradient(left, #58b530, #adcf03);
    background: linear-gradient(to right, #58b530, #adcf03);
    font-size: 24px;
    color: #FFF;
    text-align: center;
    line-height: 32px;
    border-radius: 0 16px 0 16px;
    margin-right: 16px;
    margin-top: 6px;
}

.spec-item {
    box-sizing: border-box;
    position: relative;
    padding: 0 64px 0 96px;
    width: 100%;
    min-height: 42px;
    margin-bottom: 24px;
}

.spec-item-name {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24px;
    color: #333;
    font-weight: bold;
}

.spec-item-text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24px;
    color: #333;
}

.spec-item-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 42px;
}

.spec-item-icon img {
    display: block;
    width: 36px;
    margin-top: 16px;
    margin-left: 24px;
}

.margin-bottom-0 {
    margin-bottom: 0;
}

.coupon-tag {
    position: absolute;
    top: 4px;
    left: 0;
    display: block;
    background: #ffecea;
    font-size: 24px;
    color: #fd2d39;
    border-radius: 4px;
    padding: 0 12px;
    height: 32px;
    line-height: 32px;
}

.priceYuan {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.van-swipe {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.tag-control {
    position: relative;
    padding-left: 168px;
}

.comment {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.comment-title {
    font-size: 30px;
    font-weight: bold;
    color: #333;
    line-height: 1;
    margin-bottom: 8px;
}

.comment-more {
    display: flex;
    font-size: 24px;
    color: #999;
    line-height: 1;
}

.comment-user {
    position: relative;
    height: 80px;
    padding-left: 96px;
    margin-bottom: 16px;
}

.comment-user-head {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.comment-user-name {
    font-size: 28px;
    color: #333;
    margin-bottom: 8px;
}

.comment-icon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.comment-icon img {
    display: block;
    width: 28px;
    margin-right: 8px;
}

.comment-text {
    font-size: 24px;
    color: #333;
    line-height: 1.5;
}

.comment-item {
    padding: 24px 0;
    border-bottom: 2px solid #f2f2f2;
}

.comment-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.detail-box {
    width: 100%;
    margin-bottom: 88px;
}

.detail-box img {
    display: block;
    width: 100%;
}

.bottom-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 88px;
    background: #FFF;
    padding-left: 240px;
}

.bottom-icon-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 100%;
    box-sizing: border-box;
    padding: 0 24px;
}

.bottom-btn-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.btn-add-cart,
.btn-now-buy {
    width: 50%;
    height: 100%;
    font-size: 30px;
    color: #FFF;
    line-height: 88px;
    text-align: center;
}

.btn-add-cart {
    background: #3d444a;
}

.btn-now-buy {
    background: #fd2d39;
}

.question-item {
    position: relative;
    width: 100%;
    padding: 24px 0 0;
    padding-left: 52px;
}

.question-item-icon {
    position: absolute;
    top: 24px;
    left: 0;
    background: #FF3B14;
    width: 36px;
    height: 36px;
    font-size: 24px;
    text-align: center;
    line-height: 36px;
    color: #FFF;
    border-radius: 8px;
}

// .van-overlay {
//     z-index: 996 !important;
// }

// .van-action-sheet {
//     z-index: 999 !important;
// }

// .van-popup {
//     z-index: 2003 !important;
// }

.question-item-text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24px;
    color: #333;
}

.bottom-icon-box {
    display: flex;
}

.fixed-icon-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fixed-icon-box img {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}

.fixed-icon-text {
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.product-alert-content {
    padding: 0 24px;
    max-height: 800px;
    overflow-y: scroll;
}

.product-image-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.product-image-box img {
    display: block;
    width: 160px;
    height: 160px;
    border-radius: 16px;
    margin-right: 16px;
}

.goods-price {
    font-size: 24px;
    color: #FF3B14;
}

.goods-price span {
    font-size: 28px;
}

.goods-num {
    font-size: 24px;
    color: #999;
    line-height: 1;
}

.product-alert-title {
    width: 100%;
    padding: 24px 0 12px;
    font-size: 24px;
    color: #999;
}

.num-box {
    display: flex;
}

.num-box-sub,
.num-box-add {
    width: 56px;
    height: 56px;
    background: #f2f3f5;
    border: none;
    padding: 0;
    font-size: 40px;
    color: #333;
}

.num-box-num {
    width: 64px;
    height: 56px;
    background: #f2f3f5;
    line-height: 56px;
    text-align: center;
    margin: 0 4px;
    color: #333;
}

.true-btn-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 24px 24px;
    z-index: 2;
}

.true-btn {
    width: 100%;
    height: 88px;
    background: #FF3B14;
    border: none;
    border-radius: 44px;
    font-size: 28px;
    color: #FFF;
}

.prodcut-spec-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.product-spec-item {
    background: rgb(246, 246, 246);
    color: #333;
    font-size: 24px;
    margin-right: 16px;
    line-height: 1;
    padding: 16px 24px;
    border-radius: 40px;
    margin-bottom: 16px;
}

.product-spec-item.active {
    background: #ffe5d3;
    border: 2px solid #e4751f;
    color: #e4751f;
}

.padding-top-4 {
    padding-top: 8px;
}

.coupon-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
}

.coupon-text div:first-child {
    font-size: 28px;
    font-weight: bold;
    color: #333;
}

.coupon-text div:last-child {
    font-size: 28px;
    color: #666;
}

.coupon-text div:last-child span {
    color: #FF3B14;
}

.coupon-title {
    font-size: 28px;
    color: #999;
    margin-top: 16px;
    margin-bottom: 24px;
}

.coupon-card {
    position: relative;
    width: 100%;
    height: 144px;
    padding: 16px 220px 16px 160px;
    background: #fff4f0;
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
}

.coupon-btn {
    position: absolute;
    top: 16px;
    right: 0;
    width: 200px;
    height: 112px;
    border-left: 2px dashed #fe4646;
    font-size: 28px;
    color: #fe4646;
    text-align: center;
    line-height: 112px;
}

.coupon-num {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 16px;
    left: 0;
    width: 140px;
    height: 112px;
    font-size: 24px;
    color: #fe4646;
    line-height: 1;
}

.coupon-num .big {
    font-size: 52px;
    font-weight: bold;
}

.coupon-num-box {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
}

.coupon-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

.coupon-tip {
    font-size: 28px;
    color: #fe4646;
}

.coupon-date {
    font-size: 24px;
    color: #999;
}

.coupon-tip,
.coupon-date {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coupon-card-tag {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24px;
    color: #fe4646;
    background: rgb(255, 228, 230);
    padding: 8px 12px;
    border-radius: 16px 0 16px 0;
    line-height: 1;
}

.coupon-btn-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -16px;
    right: -16px;
    width: 84px;
    height: 84px;
    color: #fe4646;
    border: 2px solid #fe4646;
    border-radius: 50%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.coupon-btn-tip div {
    width: 72px;
    height: 72px;
    border: 2px solid #fe4646;
    border-radius: 50%;
    font-size: 24px;
    text-align: center;
    line-height: 68px;
}

.margin-top-4 {
    margin-top: 8px;
}

.see-product-btn {
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.margin-bottom-4 {
    margin-bottom: 8px;
}

.para-item {
    display: flex;
    padding: 24px 0;
    border-top: 2px solid #F2F2F2;
}

.para-item:first-child {
    padding-top: 0;
    border-top: none;
}

.para-name {
    width: 4em;
    font-size: 28px;
    color: #333;
    margin-right: 40px;
}

.para-text {
    flex: 1;
    font-size: 28px;
    color: #666;
    word-break: break-word;
}

.set-top {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 24px;
    bottom: 144px;
    z-index: 19;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 2px 4px 4px #dcdcdc;
}

.set-top img {
    display: block;
    width: 100px;
}

.nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 888;
    width: 100%;
    height: 128px;
    background: -webkit-linear-gradient(left, #cb2d3e, #ef473a);
    background: linear-gradient(to right, #cb2d3e, #ef473a);
    padding: 60px 112px 0 112px;
}

.new-cart {
    position: absolute;
    color: #fff;
    right: 32px;
    bottom: 16px;
    font-size: 40px;
    z-index: 22;
}

.nav .mui-icon {
    position: absolute;
    top: 60px;
    left: 24px;
    color: #FFF;
}

.nav-item {
    flex: 1;
    text-align: center;
    font-size: 28px;
    color: rgba(255, 255, 255, .5);
    padding-top: 4px;
}

.nav-item.active {
    position: relative;
    color: #FFF;
}

.nav-item.active:before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -16px;
    width: 32px;
    height: 4px;
    background: #FFF;
}

.default-btn-box {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 29;
    width: 100%;
    padding: 8px 72px;
}

.default-btn-box div {
    width: 100%;
    height: 80px;
    border-radius: 40px;
    background: #999;
    color: #FFF;
    font-size: 28px;
    text-align: center;
    line-height: 80px;
}

.times-tip {
    font-size: 24px;
    color: #FF3B14;
    line-height: 1;
}

.href-text {
    font-size: 24px;
    color: #999;
    line-height: 1.4;
    margin-top: 32px;
}

.href-text span {
    color: #FF3B14;
}

.product-outter-content {
    position: relative;
    width: 100%;
    padding-bottom: 176px;
}

.padding-bottom {
    padding-bottom: 120px;
}

.video-item {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.video-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.video-item video {
    position: relative;
    z-index: 2;
}

.van-swipe-item {
    height: auto !important;
}

.price-box span {
    /* padding-left: 8px; */
    font-size: 28px;
}

.jinka-box {
    display: flex;
    justify-content: start;
    align-items: center;
    /* width: 200px; */
    height: 60px;
    margin-top: 20px;
}

/* 金卡 */

.cart-money {
    font-size: 30px;
    font-weight: bold;
    color: #FE4646;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.cart-jinka {
    background: linear-gradient(138deg, #4B5166, #4B5166, #273137);
    border-radius: 12px 0px 0px 12px;
    font-size: 24px;
    color: #FBFDB0;
    line-height: 24px;
    box-sizing: border-box;
    padding: 4px 16px 4px 8px;
}

.jinka-price {
    line-height: 26px;
    font-size: 26px;
    font-weight: bold;
    color: #E71A35;
    box-sizing: border-box;
    padding: 4px 8px 4px 4px;
    background-color: #FFFFFF;
    margin-left: -8px;
    border-radius: 8px 0 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jinka-left {
    display: flex;
    align-items: center;
    margin-right: 4px;
    position: relative;
    width: 114px;
    height: 32px;
    background: #db1515;
    border-radius: 6px 24px 2px 0px;

}


.jinka-left>.jinkTip {
    position: absolute;
    right: -18px;
    font-size: 44px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #fff;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
}

.vipGlod {
    width: 18px;
    height: 16px;
    position: absolute;
    left: 6px;
    top: 8px;
}

.jinka-121 {
    margin-left: -14px !important;
    font-size: 32px !important;
    color: #fd2d39;
    font-weight: bold;
}

.jinka-right {
    margin-left: -24px;
    font-size: 44px;
    color: #E5CC9E;
    line-height: 24px;
    background-color: #282828;
    box-sizing: border-box;
    padding: 20px 12px 12px 28px;
    border-radius: 40px 0px 0px 0px;
}

.vipJkBox {
    width: 100%;
    /* display: flex; */
    justify-content: center;
    align-items: center;
}

.jinka-12 {
    font-size: 24px !important;
    font-weight: 400 !important;
    padding-left: 0 !important;
    color: #fd2d39;
}



.vipLeft {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vipTitle {
    font-size: 32.0025px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #5B370F;
    line-height: .64rem;
}

.sheng {
    margin-top: 9.9975px;
    /* width: 224.0025px; */
    height: 48.9975px;
    background: #FFFFFF;
    border-radius: 20.0025px;
    line-height: 48.9975px;
    text-align: center;
    font-size: 20.0025px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #22222E;
}

.sheng span {
    margin-left: 9.9975px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #E31735;
}

.sheng span span {
    transform: scale(0.75);
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);
    -o-transform: scale(0.75);
}

.vipRight {
    width: 213px;
    height: 60.9975px;
    background: #FDCC05;
    border-radius: 30.9975px;
    font-size: 29.0025px;
    line-height: 60.9975px;
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #22222E;
}

.vipProDatail {
    width: 100%;
    position: relative;
    /* display: flex;
	justify-content: space-between;
	align-items: center; */
}

.vipJinKa {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.price-del1 {
    margin-top: 8px;
    font-size: 28px;
    margin-left: 0px !important;
}

.jinkaCon {
    margin-left: 10px;
    position: relative;
    width: 114px;
    height: 32px;
    background: #ED0A2B;
    border-radius: 24px 6px 2px 0px;
}

.vipBg {
    position: absolute;
    right: 6px;
    top: 8px;
    width: 18px;
    height: 16px;
}

.jinkaCon span {
    position: absolute;
    top: -6px;
    left: -18px;
    color: #fff !important;
    font-size: 44px !important;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
}

.vipJinKa .gPri {
    font-size: 36px;
    font-weight: bold;
    color: #ED0A2B;
}

.fuhao {
    color: #ED0A2B;
    font-size: 24px !important;
}

.share1 {
    position: absolute;
}

.share-box1 {
    top: 0px !important;
}

.huiyuanPrice {
    font-size: 24px !important;
    font-weight: 400 !important;
}

.vipBuyTip {
    margin-top: 24px;
    font-size: 28px;
    color: #333;
    box-sizing: border-box;
    padding: 8px 16px;
    width: 100%;
    background: linear-gradient(-90deg, #EAB883, #F2E6CC, #EAB783);
    border-radius: 16px;
    color: #CA1E1F;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;

    font-family: Source Han Sans CN;
    font-weight: bold;
}


* {
    box-sizing: border-box;
}



.huiyuanPrice {
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #333 !important;
}

.huiyuanPrice>span {
    color: #333 !important;
}
</style>